<template>
    <div class="announcement">
      <h2>公告资讯</h2>
      <div v-for="announcement in announcements" :key="announcement.id" class="announcement-card">
        <h4>{{ announcement.title }}</h4>
        <p>{{ announcement.content }}</p>
        <p class="date">发布日期: {{ formatDate(announcement.date) }}</p>
        <p>状态: <span :class="statusClass(announcement.status)">{{ announcement.status }}</span></p>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref , onMounted } from 'vue';
  import {listNotices} from "@/api/notice";
  
  const announcements = ref([]);

  const getNoticeList = async () => {
    const res = await listNotices();
    if (res.code === 200) {
      announcements.value = res.data;
    }
  }
  
  function formatDate(date) {
    return new Date(date).toLocaleDateString(); // 示例格式化
  }
  
  function statusClass(status) {
    return status === '已发布' ? 'status-published' : 'status-draft';
  }



  onMounted(() => {
    getNoticeList();
  });


  </script>
  
  <style scoped>
  .announcement {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 1420px;
  }
  
  h2 {
    text-align: center;
    font-family: 'Arial', sans-serif;
    color: #333;
    margin-bottom: 20px;
  }
  
  .announcement-card {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px 0;
    border-radius: 8px;
    background-color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .announcement-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  
  .date {
    font-size: 0.9em;
    color: #666;
  }
  
  .status-published {
    color: green;
    font-weight: bold;
  }
  
  .status-draft {
    color: orange;
    font-weight: bold;
  }
  </style>